<template>
	<section class="todoapp">
		<TodoHeader :arr="list" @add="addFn"></TodoHeader>
		<TodoMain :arr="showList" @del="delFn"></TodoMain>
		<TodoFooter @changeType="changeFn" @clearDone="clearDoneFn" :arr="list"></TodoFooter>
	</section>
</template>

<script>
	//1. 样式引入 + 导入组件并注册使用
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'

//2.引入css样式
import './styles/base.css'
import './styles/index.css'
	export default {
		data() {
			return {
				type:'all',
				list:JSON.parse(localStorage.getItem('vuetodo'))||[]
			};
		},
		watch:{
			list:{
				deep:true,
				handler(){
					localStorage.setItem('vuetodo',JSON.stringify(this.list))
				}
			}
		},
		computed:{
			 showList(){
				if (this.type==='active') {
					return this.list.filter((item)=>item.isDone===false)
				}else if(this.type==='complete'){
					return this.list.filter((item)=>item.isDone)
				}else{
					return this.list
				}
			},

		},
		methods:{
			//切换效果
			changeFn(type){
				this.type=type
			},
			//实现删除功能
			delFn(id){
				this.list=this.list.filter((item)=>item.id!=id)
			},
			//实现添加功能
			addFn(name){
				this.list.unshift({
					id:+new Date(),
					name,
					isDone:false
				})
			},
			//清除已完成功能
			clearDoneFn(){
			  this.list=this.list.filter((item)=>!item.isDone)
			}

		},
		components:{
			TodoHeader,
			TodoMain,
			TodoFooter,
		}

	};
</script>
